<form class="layui-form" action="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex">
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" id="searchDate" placeholder="yyyy-MM-dd" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
            </div>
        </div>
    </div>

</form>

<table id="usertable" lay-filter="usertable"></table>

<script>
    layui.use(function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;

        form.render(); // 下拉框等表单控件需要使用该方法进行渲染

        laydate.render({  // 日期控件 的渲染
            elem: '#searchDate'
        });

        //监听搜索表单的提交事件
        form.on('submit(searchBtn)', function (data) {
            console.log(data.field);
            // 让数据表格中的数据根据查询条件重新加载
            table.reload('usertable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //第一个实例
        table.render({
            elem: '#usertable'  // 跟页面中的table元素的id匹配
            , toolbar: '#toolbarMenu'
            , url: '/user/getAllUsers' //数据接口
            , page: true //开启分页
            , limit: 5 // 每页5条数据
            , limits: [5, 10, 15, 20]
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'} // 添加每一行的复选框
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'name', title: '用户名'}
                , {field: 'password', title: '密码'}
                , {
                    field: 'sex', title: '性别', templet: function (d) {
                        return d.sex == 1 ? "男" : "女";
                    }
                }
                , {field: 'birthday', title: '生日'}
                , {field: 'registTime', title: '注册日期', sort: true}
                , {field: 'auth', title: '权限'}
                , {field: 'filepath', title: '头像路径'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
        });

        //注册数据表格左上角工具栏点击事件
        table.on('toolbar(usertable)', function (obj) {
            switch (obj.event) {
                case 'export'://导出
                    $.ajax({
                        url:'/user/export',
                        type:'get',
                        success:function (ret) {
                            // 如果服务器端导出成功后，将服务器端生成的文件名返回
                            var filename = ret.data ;
                            window.location.href = '/download?filename='+filename;
                        }
                    });

                    break;
                case 'add':
                    openEditWindow(null);
                    break;
                case 'delete'://删除
                    layer.confirm('是否确认删除', function (index) {
                        //do something
                        var checkStatus = table.checkStatus('usertable');
                        console.log(checkStatus);
                        var data = checkStatus.data; // 选中行的数据
                        //长度大于0说明选了东西
                        if (data.length > 0) {
                            // 参数的格式:  &id=1&id=2&id=3
                            var param = '';
                            // 遍历获取id值
                            $.each(data, function (index, item) {
                                param += '&ids=' + item.id;
                            });
                            console.log(param);
                            $.ajax({
                                url: '/user/del',
                                type: 'post',
                                data: param,
                                success: function (ret) {
                                    // console.log(ret);
                                    if (ret.code == 0) {
                                        // 重新加载数据表格数据
                                        table.reload('usertable', {});
                                    }
                                    if (ret.code == -1) {
                                        layer.msg(ret.msg);
                                    }
                                },
                                error: function (ret) {
                                    console.log(ret);
                                }
                            });
                        }
                        layer.close(index);
                    });
                    break;
            }
            ;
        });


        //监听数据表格的行工具事件
        table.on('tool(usertable)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'edit') {
                openEditWindow(data);
            }
        });

        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html() : $('#user-edit-layer').html(),
                title: data == null ? '新增' : '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消']
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),
                        data: data == null ? $("#user-add-form").serialize() : $("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.code == 0) {
                                // 重新加载数据表格中的数据
                                table.reload('usertable', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        },
                        error: function (result) {
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    form.render();
                    // 监听用户名输入框光标移开的事件 blur
                    $("#username").blur(function () {
                        var name = $("#username").val();
                        // 发送ajax请求，查询当前输入的用户名是否存在
                        $.ajax({
                            url: '/user/checkusername?username=' + name,
                            type: 'get',
                            success: function (ret) {
                                console.log(ret);
                                if (ret.code == "0") { // 登录成功
                                    layer.msg("可以注册");
                                } else if (ret.code == "-1") { // 登录成功
                                    layer.msg("用户名已存在或为空");
                                }
                            },
                            error: function (ret) {
                                console.log(ret);
                            }
                        });

                    });

                    //日期
                    laydate.render({
                        elem: '#birthday'
                    });
                    laydate.render({
                        elem: '#registTime'
                    });
                    laydate.render({
                        elem: '#birthday1'
                    });
                    laydate.render({
                        elem: '#registTime1'
                    });
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data); // 给表单元素赋值
                    }
                }
            });
        }

    });
</script>

<script type="text/html" id="toolbarMenu">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="export">导出</button>
    </div>
</script>

<!-- 增加功能-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input id="username" type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改功能-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="birthday1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>